<template>
  <div>
    <div class="film-act-view">
      <div class="nowPlayingList-wrap">
        <ul class="nowPlayingList"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="50"
        >
            <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)" class="nowPlayingList-item">
              <div class="nowPlayingFilm-img">
                <img :src="data.poster" alt="">
              </div>
              <div class="nowPlayingFilm-info">
                <div class="nowPlayingFilm-name info-col">
                  <span class="name">{{data.name}}</span>
                  <span class="item">{{data.filmType.name}}</span>
                </div>
                <div class="nowPlayingFilm-grade info-col">
                  <span class="label">观众评分：</span>
                  <span v-if="data.grade" class="grade">{{data.grade}}</span>
                  <span v-else class="grade">暂无评分</span>
                </div>
                <div class="nowPlayingFilm-actors info-col">
                  <span class="label" v-if="data.actors">主演：{{data.actors | actorfilter}}</span>
                </div>
                <div class="nowPlayingFilm-detail info-col">
                  <span class="label">{{data.nation}} | {{data.runtime}}分钟</span>
                </div>
              </div>
              <div class="nowPlayingFilm-buy">购票</div>
            </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import { Indicator, InfiniteScroll } from 'mint-ui'

Vue.use(InfiniteScroll)

Vue.filter('actorfilter', function (data) {
  if (data) {
    var newlist = data.map(item => item.name)
  // console.log(data)
  }
  return newlist.join(' ')
})
export default {
  data () {
    return {
      datalist: [],
      loading: false,
      current: 1,
      filmsTotal: 0
    }
  },
  beforeCreate () {
    this.$store.commit('newPlayingLoadingChangeStyle')
  },
  mounted () {
    Indicator.open({
      text: '加载中...',
      spinnerType: 'triple-bounce'
    })
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=8812243',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16239969753025057135722497","bc":"110100"}',
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      this.filmsTotal = res.data.data.total
      this.datalist = res.data.data.films
      // console.log(res.data.data.films)
      Indicator.close()
    })
  },
  methods: {
    handleChangePage (id) {
      console.log(id)
      // 编程式导航-路径跳转
      //   this.$router.push(`/detail/${id}`)
      // 编程式导航-命名路由名字跳转
      this.$router.push({ name: 'Detail', params: { myid: id } })
    },
    loadMore () {
      console.log(this.datalist.length, this.filmsTotal)
      if (this.datalist.length === this.filmsTotal) {
        // Indicator.close()
        return
      }
      Indicator.open({
        text: '加载中...',
        spinnerType: 'triple-bounce'
      })
      // console.log('到底了')
      this.loading = true // 禁用到底触发请求
      this.current++
      axios({
        url: `https://m.maizuo.com/gateway?cityId=110100&pageNum=${this.current}&pageSize=10&type=1&k=8812243`,
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16239969753025057135722497","bc":"110100"}',
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        console.log(res.data.data.films)
        this.datalist = [...this.datalist, ...res.data.data.films]
        // console.log(res.data.data.films)
        this.loading = false // 启用到底触发请求
        Indicator.close()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.film-act-view {
  .nowPlayingList-wrap {
    padding-bottom: 39px;
    width:100%;
    background-color: #fff;
    .nowPlayingList {
      width:100%;
      .nowPlayingList-item {
        position: relative;
        height: 94px;
        display: block;
        list-style: none;
        padding: 10px 0px;
         margin: 0px 10px;
        border-bottom: 1px solid #eee;
        .nowPlayingFilm-img {
          float:left;
          img {
            display: block;
            width: 66px;
            height: 94px;
            background: rgb(249, 249, 211);
          }
        }
        .nowPlayingFilm-info {
          float: left;
          width: calc(100% - 136px);
          height: 94px;
          padding: 0 10px;
          .info-col {
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
          }
          .nowPlayingFilm-name {
            .name {
              max-width: calc(100% - 25px);
              color: #191a1b;
              font-size: 16px;
              height: 22px;
              line-height: 22px;
              margin-right: 5px;
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .item {
              font-size: 9px;
              color: #fff;
              background-color: #d2d6dc;
              height: 14px;
              line-height: 14px;
              padding: 0 2px;
              border-radius: 2px;
            }
          }
          .nowPlayingFilm-grade {
            .label {
              font-size: 13px;
              margin-top: 4px;
              color: #797d82;
            }
            .grade {
              color: #ffb232;
              font-size: 14px;
            }
          }
        }
        .nowPlayingFilm-actors {
          .label {
            font-size: 13px;
            margin-top: 4px;
            color: #797d82;
          }
        }
        .nowPlayingFilm-detail {
          .label {
            font-size: 13px;
            margin-top: 4px;
            color: #797d82;
          }
        }
        .nowPlayingFilm-buy {
          position: relative;
          top:  34px;
          float: right;
          height: 94px;
          margin:auto;
          line-height: 25px;
          height: 26px;
          width: 48px;
          color: #ff5f16;
          font-size: 13px;
          text-align: center;
          border-radius: 2px;
          border:1px solid #ff5f16;
        }
    }
    }
  }
}
</style>
